<script setup lang="ts">
import {  ref, onMounted } from 'vue'
import {
    HomeFilled,
    Comment,
    BellFilled,
    Right,
} from '@element-plus/icons-vue'

const options = [
  {
    value: 0,
    icon: HomeFilled,
    new:false,
  },
  {
    value:1,
    icon: Comment,
    new:false,
  },
  {
    value:2,
    icon: BellFilled,
    new:true,
  }
]
const circleUrl=ref('')
const selectedIndex=ref(0)
import { useRouter } from 'vue-router';
const router = useRouter();
function ButtonClick(index:number) {
      selectedIndex.value = index; // 更新被选中的按钮的索引
      //根据索引进行不同按钮的事件
      if(index===1){
        if (router.currentRoute.value.path !== "/Community") {
        router.replace( "/Community");
      }
      }
}
function ToRight(){
    //点击箭头事件的实施
    //返回登录页面
    //清空浏览器用户信息
    sessionStorage.clear();
}
onMounted(()=>{
    //更新new（是否有新消息,只更新铃铛的new）
    //更新头像，名称（直接使用store内的）
})

const name=localStorage.getItem('userName')
const head=localStorage.getItem('userHead')
//以上两句为测试，可以删除
</script>

<template>
  <div style="height:100%;">
    <div style="background-color:white;height:100%;width:200px;" class="ml-4">
        <el-button-group style="width: 100%;height:100%">
            <el-button
            v-for="(item, index) in options"
            :key="item.value"
            type=""
            class="button"
            :class="{ 'focused-button': selectedIndex === index }"
            @click="ButtonClick(index)"
            text
            >
                <el-icon size="20" >
                    <component :is="item.icon"/>
                </el-icon>
                <el-badge v-if="item.new" is-dot class="item"></el-badge>
            </el-button>
        </el-button-group>
    </div>
    <div class="user"  style="height:100%;width:170px;position: absolute;right:20px;top:0px;">
        <span class="name" style="max-width: 85px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;right:85px;">{{ name }}  </span>
        <el-avatar class="head" :size="30" :src="head" style="right:50px;">
            <img :src="head ?? undefined">
        </el-avatar>
        <el-icon class="right" style="right:10px;" @click="ToRight()"><Right /></el-icon>
    </div>
  </div>
</template>

<style scoped>
.button{
    border-radius: 0 !important;
    height:100%;
    width:65px;
}
.focused-button {
  background-color: rgb(216.8, 235.6, 255) !important; 
  color: #fff;
  outline: none; 
}
.focused-button svg {
  color: #409eff; 
}
.item{
    position: relative;
    top:-3px;
    left:-6px;
}
.item >>> .el-badge__content {
  background-color:#409eff !important;
}
.name,.head,.right{
    position: absolute;
    top: 50%; 
    transform: translateY(-50%);
}
</style>